<template>
  <view class="index-container">
  
    <view class="search-bar">
      <view class="search-box">
        <image src="/static/images/icons/search.png" mode="aspectFit" class="search-icon"></image>
        <input type="text" placeholder="搜索家政服务" class="search-input" ></input>
      </view>
      <text class="location" @click="selectLocation">北京市</text>
    </view>
    
  
    <view class="banner-container">
      <swiper class="banner-swiper" indicator-dots autoplay interval="3000" circular>
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image :src="item.image" mode="aspectFill" class="banner-image"></image>
        </swiper-item>
      </swiper>
    </view>
    
    <!-- 服务分类导航 -->
    <view class="service-nav">
      <view class="nav-item" v-for="(item, index) in serviceTypes" :key="index" @click="goToServiceList(item.id)">
        <image :src="item.icon" mode="aspectFit" class="nav-icon"></image>
        <text class="nav-text">{{ item.name }}</text>
      </view>
    </view>
    
    <!-- 热门服务列表 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">热门服务</text>
        <text class="section-more" >查看更多 ></text>
      </view>
      <view class="service-list">
        <service-card v-for="(service, index) in hotServices" :key="index" :service="service" @click="goToServiceDetail(service.id)"></service-card>
      </view>
    </view>
    
    
    <view class="section">
      <view class="section-header">
        <text class="section-title">精选服务人员</text>
        <text class="section-more" @click="goToStaffList">查看更多 ></text>
      </view>
      <view class="staff-list">
        <staff-card v-for="(staff, index) in hotStaff" :key="index" :staff="staff" ></staff-card>
      </view>
    </view>
    
    
    <view class="section">
      <view class="section-header">
        <text class="section-title">用户真实评价</text>
      </view>
      <view class="review-list">
        <view class="review-item" v-for="(review, index) in reviews" :key="index">
          <view class="review-header">
            <image :src="review.avatar" mode="aspectFill" class="review-avatar"></image>
            <view class="review-info">
              <text class="review-name">{{ review.name }}</text>
              <rating-star :rating="review.rating"></rating-star>
            </view>
            <text class="review-date">{{ review.date }}</text>
          </view>
          <text class="review-content">{{ review.content }}</text>
          <view class="review-images" v-if="review.images && review.images.length > 0">
            <image :src="img" mode="aspectFill" class="review-image" v-for="(img, i) in review.images" :key="i"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ServiceCard from '../../components/service-card/service-card.vue'
import StaffCard from '../../components/staff-card/staff-card.vue'
import RatingStar from '../../components/rating-star/rating-star.vue'

export default {
  components: {
    ServiceCard,
    StaffCard,
    RatingStar
  },
  data() {
    return {
      bannerList: [
        { id: 1, image: '/static/images/banner1.png', title: '春季大促，家政服务8折起' },
        { id: 2, image: '/static/images/banner2.png', title: '专业育儿嫂，持证上岗' },
        { id: 3, image: '/static/images/banner3.png', title: '家电清洗套餐，限时优惠' }
      ],
      serviceTypes: [
        { id: 1, name: '日常保洁', icon: '/static/images/service-types/cleaning.png' },
        { id: 2, name: '家电清洗', icon: '/static/images/service-types/appliance.png' },
        { id: 3, name: '搬家服务', icon: '/static/images/service-types/moving.png' },
        { id: 4, name: '保姆月嫂', icon: '/static/images/service-types/nanny.png' },
        { id: 5, name: '管道疏通', icon: '/static/images/service-types/plumbing.png' },
        { id: 6, name: '家具维修', icon: '/static/images/service-types/furniture.png' },
        { id: 7, name: '更多服务', icon: '/static/images/service-types/more.png' }
      ],
      hotServices: [
        { id: 1, name: '全屋深度保洁', price: 5, unit: '元/㎡', originalPrice: 6, image: '/static/images/services/service1.png', sales: 2345, score: 4.9 },
        { id: 2, name: '空调清洗', price: 89, unit: '元/台', originalPrice: 120, image: '/static/images/services/service2.png', sales: 1876, score: 4.8 },
        { id: 3, name: '冰箱清洗', price: 129, unit: '元/台', originalPrice: 169, image: '/static/images/services/service3.png', sales: 1563, score: 4.7 },
        { id: 4, name: '油烟机清洗', price: 159, unit: '元/台', originalPrice: 199, image: '/static/images/services/service4.png', sales: 1789, score: 4.9 }
      ],
      hotStaff: [
        { id: 1, name: '李阿姨', avatar: '/static/images/staff/staff1.png', serviceType: '日常保洁', years: 5, score: 4.9, orders: 1243 },
        { id: 2, name: '王师傅', avatar: '/static/images/staff/staff2.png', serviceType: '家电清洗', years: 8, score: 4.8, orders: 987 },
        { id: 3, name: '张姐', avatar: '/static/images/staff/staff3.png', serviceType: '保姆月嫂', years: 6, score: 4.9, orders: 765 }
      ],
      reviews: [
        { 
          id: 1, 
          avatar: '/static/images/users/user1.png', 
          name: '刘女士', 
          rating: 5, 
          date: '2023-05-12', 
          content: '服务非常专业，打扫得很干净，家里焕然一新。服务人员态度也很好，很满意这次体验！',
          images: ['/static/images/reviews/review1.png']
        },
        { 
          id: 2, 
          avatar: '/static/images/users/user2.png', 
          name: '张先生', 
          rating: 5, 
          date: '2023-05-08', 
          content: '空调清洗得很彻底，师傅还教了我一些保养知识。价格也很实惠，以后还会选择这家。',
          images: ['/static/images/reviews/review2.png', '/static/images/reviews/review3.png']
        },
        { 
          id: 3, 
          avatar: '/static/images/users/user3.png', 
          name: '陈女士', 
          rating: 4, 
          date: '2023-05-05', 
          content: '育儿嫂张姐经验丰富，对宝宝很有耐心，我们很放心。服务期间还会教我们一些育儿知识，非常专业。'
        }
      ]
    }
  },
  onLoad() {
    // 页面加载时执行
  },
  methods: {

   
    goToServiceList() {
		uni.switchTab({
		  url: '/pages/service-list/service-list'
		});
    },

     goToServiceDetail(id) {
         uni.navigateTo({ url: `/pages/service-detail/service-detail?id=${id}` });
       }
    
  }
}
</script>

<style lang="scss">
.index-container {
  padding-bottom: 100rpx;
  background-color: #f5f5f5;
  
  .search-bar {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: #FF7D00;
    
    .search-box {
      flex: 1;
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 40rpx;
      padding: 10rpx 20rpx;
      
      .search-icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
      
      .search-input {
        flex: 1;
        font-size: 26rpx;
        height: 40rpx;
      }
    }
    
    .location {
      color: #fff;
      font-size: 28rpx;
      margin-left: 20rpx;
    }
  }
  
  .banner-container {
    width: 100%;
    height: 360rpx;
    padding: 20rpx 30rpx;
    
    .banner-swiper {
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
      overflow: hidden;
      
      .banner-image {
        width: 100%;
        height: 100%;
      }
    }
  }
  
  .service-nav {
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 0;
    background-color: #fff;
    
    .nav-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx 0;
      
      .nav-icon {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 10rpx;
      }
      
      .nav-text {
        font-size: 24rpx;
        color: #333;
      }
    }
  }
  
  .section {
    background-color: #fff;
    margin-top: 20rpx;
    padding: 20rpx 30rpx;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20rpx;
      
      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        display: flex;
        align-items: center;
        
        .title-icon {
          width: 8rpx;
          height: 28rpx;
          background-color: #FF7D00;
          border-radius: 4rpx;
          margin-right: 10rpx;
        }
      }
      
      .section-more {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .service-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    
    .staff-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      
      .staff-card {
        margin-right: 20rpx;
      }
    }
    
    .review-list {
      .review-item {
        margin-bottom: 20rpx;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #eee;
        
        .review-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10rpx;
          
          .review-avatar {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }
          
          .review-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            
            .review-name {
              font-size: 26rpx;
              color: #333;
              margin-bottom: 6rpx;
            }
          }
          
          .review-date {
            font-size: 22rpx;
            color: #999;
          }
        }
        
        .review-content {
          font-size: 26rpx;
          color: #666;
          margin-bottom: 10rpx;
        }
        
        .review-images {
          display: flex;
          
          .review-image {
            width: 160rpx;
            height: 160rpx;
            margin-right: 10rpx;
            border-radius: 8rpx;
          }
        }
      }
    }
  }
}
</style>
